import 'dart:async';
import 'dart:math';

import 'package:cached_network_image/cached_network_image.dart';
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:get/get.dart';
import 'package:yi_shop/utils/colors.dart';
import 'package:yi_shop/utils/styles.dart';
import 'package:yi_shop/utils/tools.dart';

class SeckillListController extends GetxController {
  RxInt timeout = (11 * 3600 - Random.secure().nextInt(1000)).obs;

  Timer? _timer;

  @override
  void onInit() {
    _timer = Timer.periodic(const Duration(seconds: 1), (Timer timer) {
      if (timeout.value == 0) {
        return _timer?.cancel();
      }
      String result = formatDuration();
      if (result.endsWith('00')) {
        timeout--;
      }
      timeout--;
    });
    super.onInit();
  }

  String formatDuration() {
    var duration = Duration(seconds: timeout.value);
    var hh = duration.inHours.toString().padLeft(2, '0');
    var mm = (duration.inMinutes % 60).toString().padLeft(2, '0');
    var ss = (duration.inSeconds % 60).toString().padLeft(2, '0');
    return '$hh:$mm:$ss';
  }

  String durationTransform(int seconds, int index) {
    if (seconds > 0) {
      String str = Duration(seconds: seconds).toString();
      RegExp regExp = RegExp(r'(\d+):(\d+):(\d+)(\.\d+)?$');
      Match? match = regExp.matchAsPrefix(str);
      if (match != null) {
        return match.group(index) ?? '00';
      }
    }
    return '00';
  }

  @override
  void onClose() {
    clearTimeout();
    super.onClose();
  }

  void clearTimeout() {
    if (_timer != null && _timer!.isActive) {
      _timer?.cancel();
    }
  }
}

class SeckillListPage extends GetView<SeckillListController> {
  const SeckillListPage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        leading: ToolsUtils.builderLeading(),
        title: Text(
          '秒杀',
          style: StylesUtils.customTextStyle(
              fontSize: StylesUtils.fontSize18, fontWeight: FontWeight.w700),
        ),
        bottom: PreferredSize(
            preferredSize: const Size.fromHeight(60),
            child: Container(
              padding: EdgeInsets.symmetric(vertical: 10.w),
              height: 60,
              child: ListView(
                scrollDirection: Axis.horizontal,
                children: [
                  Container(
                    margin: EdgeInsets.only(left: 10.w, right: 15.w),
                    constraints: const BoxConstraints(maxWidth: 60),
                    child: Column(
                      children: [
                        Center(
                          child: Text(
                            '10:00',
                            style: StylesUtils.customTextStyle(
                                fontWeight: FontWeight.w500, fontSize: StylesUtils.fontSize18),
                          ),
                        ),
                        Container(
                          margin: EdgeInsets.only(top: 5.h),
                          alignment: Alignment.center,
                          child: Text(
                            '抢购中',
                            style: StylesUtils.customTextStyle(fontSize: StylesUtils.fontSize12),
                          ),
                        )
                      ],
                    ),
                  ),
                  Container(
                    margin: EdgeInsets.only(right: 15.w),
                    constraints: const BoxConstraints(maxWidth: 60),
                    child: Column(
                      children: [
                        Center(
                          child: Text(
                            '12:00',
                            style: StylesUtils.customTextStyle(
                                color: ColorsUtils.colorCccc,
                                fontWeight: FontWeight.w500,
                                fontSize: StylesUtils.fontSize18),
                          ),
                        ),
                        Container(
                          margin: EdgeInsets.only(top: 5.h),
                          alignment: Alignment.center,
                          child: Text(
                            '即将开始',
                            style: StylesUtils.customTextStyle(
                                fontSize: StylesUtils.fontSize12, color: ColorsUtils.colorCccc),
                          ),
                        )
                      ],
                    ),
                  ),
                  Container(
                    margin: EdgeInsets.only(right: 15.w),
                    constraints: const BoxConstraints(maxWidth: 60),
                    child: Column(
                      children: [
                        Center(
                          child: Text(
                            '14:00',
                            style: StylesUtils.customTextStyle(
                                color: ColorsUtils.colorCccc,
                                fontWeight: FontWeight.w500,
                                fontSize: StylesUtils.fontSize18),
                          ),
                        ),
                        Container(
                          margin: EdgeInsets.only(top: 5.h),
                          alignment: Alignment.center,
                          child: Text(
                            '即将开始',
                            style: StylesUtils.customTextStyle(
                                fontSize: StylesUtils.fontSize12, color: ColorsUtils.colorCccc),
                          ),
                        )
                      ],
                    ),
                  ),
                  Container(
                    margin: EdgeInsets.only(right: 15.w),
                    constraints: const BoxConstraints(maxWidth: 60),
                    child: Column(
                      children: [
                        Center(
                          child: Text(
                            '16:00',
                            style: StylesUtils.customTextStyle(
                                color: ColorsUtils.colorCccc,
                                fontWeight: FontWeight.w500,
                                fontSize: StylesUtils.fontSize18),
                          ),
                        ),
                        Container(
                          margin: EdgeInsets.only(top: 5.h),
                          alignment: Alignment.center,
                          child: Text(
                            '即将开始',
                            style: StylesUtils.customTextStyle(
                                fontSize: StylesUtils.fontSize12, color: ColorsUtils.colorCccc),
                          ),
                        )
                      ],
                    ),
                  ),
                  Container(
                    margin: EdgeInsets.only(right: 15.w),
                    constraints: const BoxConstraints(maxWidth: 60),
                    child: Column(
                      children: [
                        Center(
                          child: Text(
                            '18:00',
                            style: StylesUtils.customTextStyle(
                                color: ColorsUtils.colorCccc,
                                fontWeight: FontWeight.w500,
                                fontSize: StylesUtils.fontSize18),
                          ),
                        ),
                        Container(
                          margin: EdgeInsets.only(top: 5.h),
                          alignment: Alignment.center,
                          child: Text(
                            '即将开始',
                            style: StylesUtils.customTextStyle(
                                fontSize: StylesUtils.fontSize12, color: ColorsUtils.colorCccc),
                          ),
                        )
                      ],
                    ),
                  ),
                  Container(
                    margin: EdgeInsets.only(right: 15.w),
                    constraints: const BoxConstraints(maxWidth: 60),
                    child: Column(
                      children: [
                        Center(
                          child: Text(
                            '20:00',
                            style: StylesUtils.customTextStyle(
                                color: ColorsUtils.colorCccc,
                                fontWeight: FontWeight.w500,
                                fontSize: StylesUtils.fontSize18),
                          ),
                        ),
                        Container(
                          margin: EdgeInsets.only(top: 5.h),
                          alignment: Alignment.center,
                          child: Text(
                            '即将开始',
                            style: StylesUtils.customTextStyle(
                                fontSize: StylesUtils.fontSize12, color: ColorsUtils.colorCccc),
                          ),
                        )
                      ],
                    ),
                  ),
                  Container(
                    margin: EdgeInsets.only(right: 15.w),
                    constraints: const BoxConstraints(maxWidth: 60),
                    child: Column(
                      children: [
                        Center(
                          child: Text(
                            '22:00',
                            style: StylesUtils.customTextStyle(
                                color: ColorsUtils.colorCccc,
                                fontWeight: FontWeight.w500,
                                fontSize: StylesUtils.fontSize18),
                          ),
                        ),
                        Container(
                          margin: EdgeInsets.only(top: 5.h),
                          alignment: Alignment.center,
                          child: Text(
                            '即将开始',
                            style: StylesUtils.customTextStyle(
                                fontSize: StylesUtils.fontSize12, color: ColorsUtils.colorCccc),
                          ),
                        )
                      ],
                    ),
                  ),
                ],
              ),
            )),
      ),
      body: SingleChildScrollView(
        child: Column(
          children: [
            Container(
              height: 40,
              padding: EdgeInsets.only(left: 20.w, right: 15.w),
              child: Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: [
                  Text(
                    '抢购中，先下单先得哦，数量有限',
                    style: StylesUtils.customTextStyle(
                        color: ColorsUtils.color6666, fontSize: StylesUtils.fontSize12),
                  ),
                  Obx(() => Text.rich(TextSpan(
                          text: '距离结束 ',
                          style: StylesUtils.customTextStyle(
                              color: ColorsUtils.color6666, fontSize: StylesUtils.fontSize12),
                          children: [
                            TextSpan(
                                text: controller.formatDuration(),
                                style: StylesUtils.customTextStyle(
                                    color: ColorsUtils.colorF048, fontSize: StylesUtils.fontSize12))
                          ])))
                ],
              ),
            ),
            for (var i = 0; i < 25; i++)
              Container(
                margin: EdgeInsets.only(bottom: 15.h),
                color: Colors.white,
                padding: EdgeInsets.symmetric(vertical: 10.h, horizontal: 15.w),
                child: Row(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    CachedNetworkImage(
                      imageUrl:
                          'https://m.360buyimg.com/babel/jfs/t1/206448/34/43725/101395/66448bc9F9273bc9a/eeb147395bc7fdda.jpg',
                      width: 104,
                      height: 102,
                      fit: BoxFit.fill,
                    ),
                    Expanded(
                        child: Padding(
                      padding: EdgeInsets.only(left: 10.w),
                      child: Column(
                        children: [
                          Container(
                            alignment: Alignment.centerLeft,
                            margin: EdgeInsets.only(bottom: 10.h),
                            child: Text(
                              '华为MateBook 14 酷睿 Ultra笔记本电脑 2.8K OLED触控手写屏 轻薄机身 Ultra 5 16G 512',
                              style: StylesUtils.customTextStyle(
                                  color: ColorsUtils.color3333,
                                  fontSize: StylesUtils.fontSize12,
                                  lineHeight: 1.3.h),
                              maxLines: 2,
                              overflow: TextOverflow.ellipsis,
                            ),
                          ),
                          Row(
                            mainAxisAlignment: MainAxisAlignment.spaceBetween,
                            crossAxisAlignment: CrossAxisAlignment.end,
                            children: [
                              Text(
                                '￥6888.00',
                                style: StylesUtils.customTextStyle(
                                    color: ColorsUtils.colorF95e, fontSize: StylesUtils.fontSize16),
                              ),
                              TextButton(
                                  onPressed: () {},
                                  style: ButtonStyle(
                                      minimumSize: const WidgetStatePropertyAll(Size(90, 30)),
                                      padding: const WidgetStatePropertyAll(EdgeInsets.zero),
                                      alignment: Alignment.center,
                                      backgroundColor: WidgetStatePropertyAll(
                                          ColorsUtils.parseColorFromHexString(
                                              ColorsUtils.colorF048)),
                                      shape: WidgetStatePropertyAll(RoundedRectangleBorder(
                                          borderRadius: BorderRadius.circular(15)))),
                                  child: Text(
                                    '立即购买',
                                    style: StylesUtils.customTextStyle(),
                                  )),
                            ],
                          ),
                          Container(
                            margin: EdgeInsets.only(top: 10.h),
                            child: Row(
                              mainAxisAlignment: MainAxisAlignment.spaceBetween,
                              children: [
                                Text(
                                  '￥7189.00',
                                  style: StylesUtils.customTextStyle(
                                      color: ColorsUtils.color9999,
                                      fontSize: StylesUtils.fontSize13,
                                      decoration: TextDecoration.lineThrough,
                                      decorationColor: ColorsUtils.parseColorFromHexString(
                                          ColorsUtils.color9999),
                                      decorationStyle: TextDecorationStyle.solid,
                                      decorationThickness: 1),
                                ),
                                Text(
                                  '已售30%',
                                  style: StylesUtils.customTextStyle(
                                      color: ColorsUtils.color9999,
                                      fontSize: StylesUtils.fontSize13),
                                ),
                                Container(
                                  constraints: const BoxConstraints.expand(width: 96, height: 10),
                                  decoration: BoxDecoration(
                                      borderRadius: BorderRadius.circular(5),
                                      border: Border.all(
                                          color: ColorsUtils.parseColorFromHexString(
                                              ColorsUtils.colorF26f))),
                                  child: LinearProgressIndicator(
                                    minHeight: 10,
                                    value: 0.3,
                                    backgroundColor: Colors.transparent,
                                    valueColor: AlwaysStoppedAnimation<Color>(
                                        ColorsUtils.parseColorFromHexString(ColorsUtils.colorF26f)),
                                  ),
                                ),
                              ],
                            ),
                          )
                        ],
                      ),
                    ))
                  ],
                ),
              ),
          ],
        ),
      ),
    );
  }
}
